<template>
  <van-nav-bar fixed z-index="200" :title="title" @click-left="onClickLeft">
    <template #left v-if="back">
      <van-icon name="arrow-left" size="20" />
    </template>

    <template #right>
      <!-- <van-icon
        v-if="!search"
        @click="gotowhere('search')"
        name="search"
        size="18"
        style="margin-right: 10px"
      /> -->
      <van-popover
        placement="bottom-end"
        v-model="showPopover"
        trigger="click"
        :actions="actions"
        @select="chooseOne"
      >
        <template #reference>
          <van-icon name="ellipsis" size="20" />
        </template>
      </van-popover>
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  name: "myhead",
  props: ["title", "back", "login", "scan", "phone"],
  data() {
    return {
      showPopover: false,
      actions: [
        {
          text: "登录",
          icon: "user-circle-o",
          name: "login",
          click: this.login,
        },
        { text: "扫码", icon: "scan", name: "scan", click: this.scan },
        { text: "拍照", icon: "smile-o", name: "photo", click: this.photo },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    chooseOne(value) {
      console.log(value);
      !value.click && this.gotowhere(value.name);
    },
  },
};
</script>

<style lang="scss" scoped >
::v-deep.van-nav-bar {
  width: 100%;
  background: #fff;
}
::v-deep.van-popover__content {
  .van-popover__action {
    width: 120px !important;
    justify-content: center !important;
  }
}
</style>
